<template>
  <view class="accept-record-page">
    <!-- 顶部导航栏 -->
    <view class="custom-nav">
      <view class="nav-back" @click="navBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-title">接单记录</view>
      <view class="nav-filter" @click="showFilter">
        <text class="filter-icon">筛选</text>
      </view>
    </view>

    <!-- 状态筛选标签 -->
    <view class="status-tabs">
      <scroll-view scroll-x class="tabs-scroll">
        <view class="tabs-container">
          <view 
            class="tab-item" 
            :class="{ active: activeStatus === 'all' }"
            @click="activeStatus = 'all'"
          >
            全部
          </view>
          <view 
            class="tab-item" 
            :class="{ active: activeStatus === 'pending' }"
            @click="activeStatus = 'pending'"
          >
            待处理
          </view>
          <view 
            class="tab-item" 
            :class="{ active: activeStatus === 'processing' }"
            @click="activeStatus = 'processing'"
          >
            处理中
          </view>
          <view 
            class="tab-item" 
            :class="{ active: activeStatus === 'completed' }"
            @click="activeStatus = 'completed'"
          >
            已完成
          </view>
          <view 
            class="tab-item" 
            :class="{ active: activeStatus === 'cancelled' }"
            @click="activeStatus = 'cancelled'"
          >
            已取消
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 接单记录列表 -->
    <scroll-view class="record-scroll" scroll-y>
      <view class="record-container">
        <!-- 记录项 -->
        <view 
          class="record-item" 
          v-for="(record, index) in filteredRecords" 
          :key="index"
          @click="viewDetail(record)"
        >
          <!-- 订单基本信息 -->
          <view class="record-header">
            <view class="order-number">
              <text class="label">订单编号：</text>
              <text class="value">{{ record.orderNo }}</text>
            </view>
            <view class="order-status" :class="getStatusClass(record.status)">
              {{ getStatusText(record.status) }}
            </view>
          </view>
          
          <!-- 订单详情 -->
          <view class="record-body">
            <view class="order-info">
              <view class="service-icon">
                <image :src="record.serviceIcon" mode="widthFix" class="icon-img"></image>
              </view>
              <view class="service-details">
                <view class="service-name">{{ record.serviceName }}</view>
                <view class="service-time">
                  <text class="time-icon">⏰</text>
                  <text class="time-text">{{ record.createTime }}</text>
                </view>
              </view>
            </view>
            
            <view class="order-amount">
              <text class="amount-label">接单金额：</text>
              <text class="amount-value">¥{{ record.amount }}</text>
            </view>
          </view>
          
          <!-- 操作按钮 -->
          <view class="record-actions" v-if="showActions(record.status)">
            <button 
              class="action-btn cancel-btn" 
              v-if="record.status === 'pending' || record.status === 'processing'"
              @click.stop="cancelOrder(record)"
            >
              取消订单
            </button>
            <button 
              class="action-btn complete-btn" 
              v-if="record.status === 'processing'"
              @click.stop="completeOrder(record)"
            >
              完成订单
            </button>
            <button 
              class="action-btn contact-btn" 
              v-if="record.status === 'pending' || record.status === 'processing'"
              @click.stop="contactCustomer(record)"
            >
              联系客户
            </button>
          </view>
          
          <!-- 分割线 -->
          <view class="record-divider" v-if="index !== filteredRecords.length - 1"></view>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="filteredRecords.length === 0">
          <view class="empty-icon">📝</view>
          <view class="empty-text">暂无接单记录</view>
          <view class="empty-desc">您当前没有相关的接单记录</view>
          <button class="find-order-btn" @click="gotoFindOrders">
            去寻找订单
          </button>
        </view>
      </view>
    </scroll-view>

    <!-- 筛选弹窗 -->
    <view class="filter-modal" v-if="showFilterModal">
      <view class="modal-mask" @click="showFilterModal = false"></view>
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">筛选条件</view>
          <view class="modal-close" @click="showFilterModal = false">
            <text>×</text>
          </view>
        </view>
        
        <view class="filter-content">
          <view class="filter-section">
            <view class="filter-title">时间范围</view>
            <view class="date-options">
              <view 
                class="date-item" 
                :class="{ active: selectedDateRange === 'today' }"
                @click="selectedDateRange = 'today'"
              >
                今天
              </view>
              <view 
                class="date-item" 
                :class="{ active: selectedDateRange === 'week' }"
                @click="selectedDateRange = 'week'"
              >
                本周
              </view>
              <view 
                class="date-item" 
                :class="{ active: selectedDateRange === 'month' }"
                @click="selectedDateRange = 'month'"
              >
                本月
              </view>
              <view 
                class="date-item" 
                :class="{ active: selectedDateRange === 'custom' }"
                @click="selectedDateRange = 'custom'"
              >
                自定义
              </view>
            </view>
          </view>
          
          <view class="filter-section" v-if="selectedDateRange === 'custom'">
            <view class="date-picker">
              <view class="date-input">
                <text>开始日期：</text>
                <picker mode="date" :value="startDate" @change="onStartDateChange">
                  <view class="picker-view">{{ startDate }}</view>
                </picker>
              </view>
              <view class="date-input">
                <text>结束日期：</text>
                <picker mode="date" :value="endDate" @change="onEndDateChange">
                  <view class="picker-view">{{ endDate }}</view>
                </picker>
              </view>
            </view>
          </view>
          
          <view class="filter-section">
            <view class="filter-title">服务类型</view>
            <view class="service-options">
              <view 
                class="service-item" 
                :class="{ active: selectedService === 'all' }"
                @click="selectedService = 'all'"
              >
                全部类型
              </view>
              <view 
                class="service-item" 
                :class="{ active: selectedService === 'repair' }"
                @click="selectedService = 'repair'"
              >
                维修服务
              </view>
              <view 
                class="service-item" 
                :class="{ active: selectedService === 'delivery' }"
                @click="selectedService = 'delivery'"
              >
                配送服务
              </view>
              <view 
                class="service-item" 
                :class="{ active: selectedService === 'installation' }"
                @click="selectedService = 'installation'"
              >
                安装服务
              </view>
            </view>
          </view>
        </view>
        
        <view class="modal-actions">
          <button class="action-btn reset-btn" @click="resetFilter">
            重置
          </button>
          <button class="action-btn confirm-btn" @click="confirmFilter">
            确认筛选
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 订单状态筛选
      activeStatus: 'all',
      
      // 筛选弹窗
      showFilterModal: false,
      
      // 筛选条件
      selectedDateRange: 'month',
      startDate: '',
      endDate: '',
      selectedService: 'all',
      
      // 接单记录数据
      orders: [
        {
          id: 1,
          orderNo: 'ORD20231012001',
          serviceName: '家电维修 - 空调清洗',
          serviceIcon: '/static/icons/repair.png',
          createTime: '2023-10-12 09:30',
          amount: 80,
          status: 'completed'
        },
        {
          id: 2,
          orderNo: 'ORD20231011045',
          serviceName: '同城配送 - 生鲜食品',
          serviceIcon: '/static/icons/delivery.png',
          createTime: '2023-10-11 15:45',
          amount: 35,
          status: 'processing'
        },
        {
          id: 3,
          orderNo: 'ORD20231010028',
          serviceName: '家具安装 - 衣柜组装',
          serviceIcon: '/static/icons/installation.png',
          createTime: '2023-10-10 10:20',
          amount: 120,
          status: 'pending'
        },
        {
          id: 4,
          orderNo: 'ORD20231009076',
          serviceName: '家电维修 - 冰箱维修',
          serviceIcon: '/static/icons/repair.png',
          createTime: '2023-10-09 14:10',
          amount: 150,
          status: 'cancelled'
        },
        {
          id: 5,
          orderNo: 'ORD20231008052',
          serviceName: '同城配送 - 文件资料',
          serviceIcon: '/static/icons/delivery.png',
          createTime: '2023-10-08 16:30',
          amount: 25,
          status: 'completed'
        }
      ]
    };
  },
  
  computed: {
    // 筛选后的记录
    filteredRecords() {
      // 基础状态筛选
      let result = this.orders;
      
      if (this.activeStatus !== 'all') {
        result = result.filter(order => order.status === this.activeStatus);
      }
      
      // 服务类型筛选
      if (this.selectedService !== 'all') {
        result = result.filter(order => {
          if (this.selectedService === 'repair' && order.serviceName.includes('维修')) return true;
          if (this.selectedService === 'delivery' && order.serviceName.includes('配送')) return true;
          if (this.selectedService === 'installation' && order.serviceName.includes('安装')) return true;
          return false;
        });
      }
      
      // 这里可以添加日期范围筛选逻辑
      
      return result;
    }
  },
  
  onLoad() {
    // 初始化日期
    const today = this.formatDate(new Date());
    this.endDate = today;
    
    // 设置默认开始日期为当月第一天
    const firstDay = new Date();
    firstDay.setDate(1);
    this.startDate = this.formatDate(firstDay);
  },
  
  methods: {
    // 返回上一页
    navBack() {
      uni.navigateBack({ delta: 1 });
    },
    
    // 显示筛选弹窗
    showFilter() {
      this.showFilterModal = true;
    },
    
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 开始日期选择
    onStartDateChange(e) {
      this.startDate = e.detail.value;
    },
    
    // 结束日期选择
    onEndDateChange(e) {
      this.endDate = e.detail.value;
    },
    
    // 重置筛选条件
    resetFilter() {
      this.selectedDateRange = 'month';
      this.selectedService = 'all';
      
      // 重置日期
      const today = this.formatDate(new Date());
      this.endDate = today;
      
      const firstDay = new Date();
      firstDay.setDate(1);
      this.startDate = this.formatDate(firstDay);
    },
    
    // 确认筛选
    confirmFilter() {
      this.showFilterModal = false;
      // 执行筛选逻辑
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'pending': '待处理',
        'processing': '处理中',
        'completed': '已完成',
        'cancelled': '已取消'
      };
      return statusMap[status] || status;
    },
    
    // 获取状态样式
    getStatusClass(status) {
      const classMap = {
        'pending': 'status-pending',
        'processing': 'status-processing',
        'completed': 'status-completed',
        'cancelled': 'status-cancelled'
      };
      return classMap[status] || '';
    },
    
    // 是否显示操作按钮
    showActions(status) {
      return status === 'pending' || status === 'processing';
    },
    
    // 查看详情
    viewDetail(record) {
      uni.navigateTo({
        url: `/pages/orders/order-detail?id=${record.id}`
      });
    },
    
    // 取消订单
    cancelOrder(record) {
      uni.showModal({
        title: '取消订单',
        content: '确定要取消此订单吗？',
        success: (res) => {
          if (res.confirm) {
            // 模拟取消订单
            const index = this.orders.findIndex(item => item.id === record.id);
            if (index !== -1) {
              this.orders[index].status = 'cancelled';
              uni.showToast({
                title: '订单已取消',
                icon: 'success'
              });
            }
          }
        }
      });
    },
    
    // 完成订单
    completeOrder(record) {
      uni.showModal({
        title: '完成订单',
        content: '确定已完成此订单吗？',
        success: (res) => {
          if (res.confirm) {
            // 模拟完成订单
            const index = this.orders.findIndex(item => item.id === record.id);
            if (index !== -1) {
              this.orders[index].status = 'completed';
              uni.showToast({
                title: '订单已完成',
                icon: 'success'
              });
            }
          }
        }
      });
    },
    
    // 联系客户
    contactCustomer(record) {
      uni.showActionSheet({
        itemList: ['电话联系', '发送消息'],
        success: (res) => {
          if (res.tapIndex === 0) {
            uni.makePhoneCall({
              phoneNumber: '13800138000' // 模拟客户电话
            });
          } else if (res.tapIndex === 1) {
            uni.navigateTo({
              url: `/pages/message/chat?id=${record.id}`
            });
          }
        }
      });
    },
    
    // 去寻找订单
    gotoFindOrders() {
      uni.navigateTo({
        url: '/pages/orders/find-orders'
      });
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #165DFF;
$primary-light: #E8F3FF;
$success: #00B42A;
$processing: #FF7D00;
$pending: #FF9A2E;
$cancelled: #86909C;
$warning: #FF4D4F;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$bg: #F5F7FA;
$card: #FFFFFF;
$border: #E5E6EB;
$shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);

.accept-record-page {
  background-color: $bg;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 自定义导航栏
.custom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: $card;
  box-shadow: $shadow;
  
  .nav-back, .nav-filter {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    
    &:hover {
      background-color: $bg;
    }
  }
  
  .back-icon {
    font-size: 45rpx;
    color: $text-primary;
  }
  
  .filter-icon {
    font-size: 28rpx;
    color: $text-primary;
  }
  
  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: $text-primary;
  }
}

// 状态筛选标签
.status-tabs {
  height: 80rpx;
  background-color: $card;
  border-bottom: 1px solid $border;
  
  .tabs-scroll {
    width: 100%;
    height: 100%;
  }
  
  .tabs-container {
    display: flex;
    height: 100%;
    padding: 0 20rpx;
  }
  
  .tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24rpx;
    margin-right: 10rpx;
    font-size: 28rpx;
    color: $text-secondary;
    position: relative;
    transition: all 0.3s;
    
    &.active {
      color: $primary;
      font-weight: 600;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 6rpx;
        background-color: $primary;
        border-radius: 3rpx 3rpx 0 0;
      }
    }
    
    &:hover {
      color: $primary;
    }
  }
}

// 滚动区域
.record-scroll {
  width: 100%;
  height: calc(100vh - var(--status-bar-height) - 90rpx - 80rpx);
}

// 内容容器
.record-container {
  padding: 20rpx;
}

// 记录项
.record-item {
  background-color: $card;
  border-radius: 18rpx;
  padding: 28rpx 30rpx;
  margin-bottom: 20rpx;
  box-shadow: $shadow;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  }
  
  // 头部信息
  .record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    .order-number {
      .label {
        font-size: 24rpx;
        color: $text-tertiary;
      }
      
      .value {
        font-size: 24rpx;
        color: $text-secondary;
        margin-left: 6rpx;
      }
    }
    
    .order-status {
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
      font-weight: 500;
    }
    
    .status-pending {
      background-color: rgba(255, 154, 46, 0.1);
      color: $pending;
    }
    
    .status-processing {
      background-color: rgba(255, 125, 0, 0.1);
      color: $processing;
    }
    
    .status-completed {
      background-color: rgba(0, 180, 42, 0.1);
      color: $success;
    }
    
    .status-cancelled {
      background-color: rgba(134, 144, 156, 0.1);
      color: $cancelled;
    }
  }
  
  // 主体内容
  .record-body {
    margin-bottom: 24rpx;
    
    .order-info {
      display: flex;
      margin-bottom: 20rpx;
      
      .service-icon {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
        flex-shrink: 0;
        
        .icon-img {
          width: 100%;
          height: 100%;
        }
      }
      
      .service-details {
        flex: 1;
        
        .service-name {
          font-size: 28rpx;
          font-weight: 600;
          color: $text-primary;
          margin-bottom: 8rpx;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .service-time {
          display: flex;
          align-items: center;
          
          .time-icon {
            font-size: 22rpx;
            color: $text-tertiary;
            margin-right: 8rpx;
          }
          
          .time-text {
            font-size: 22rpx;
            color: $text-tertiary;
          }
        }
      }
    }
    
    .order-amount {
      display: flex;
      justify-content: flex-end;
      
      .amount-label {
        font-size: 24rpx;
        color: $text-tertiary;
        margin-right: 6rpx;
      }
      
      .amount-value {
        font-size: 26rpx;
        font-weight: 600;
        color: $warning;
      }
    }
  }
  
  // 操作按钮
  .record-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16rpx;
    
    .action-btn {
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 24rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
      transition: all 0.2s;
    }
    
    .cancel-btn {
      background-color: $bg;
      color: $warning;
      border: 1px solid $warning;
      
      &:hover {
        background-color: rgba(255, 77, 79, 0.1);
      }
    }
    
    .complete-btn {
      background-color: $success;
      color: white;
      border: 1px solid $success;
      
      &:hover {
        background-color: #00A824;
      }
    }
    
    .contact-btn {
      background-color: $primary-light;
      color: $primary;
      border: 1px solid $primary;
      
      &:hover {
        background-color: $primary;
        color: white;
      }
    }
  }
  
  // 分割线
  .record-divider {
    height: 1px;
    background-color: $border;
    margin-top: 24rpx;
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 180rpx 0 100rpx;
  text-align: center;
  
  .empty-icon {
    font-size: 140rpx;
    color: $text-tertiary;
    margin-bottom: 40rpx;
    opacity: 0.6;
  }
  
  .empty-text {
    font-size: 32rpx;
    font-weight: 600;
    color: $text-secondary;
    margin-bottom: 16rpx;
  }
  
  .empty-desc {
    font-size: 26rpx;
    color: $text-tertiary;
    margin-bottom: 50rpx;
    max-width: 500rpx;
  }
  
  .find-order-btn {
    width: 320rpx;
    height: 88rpx;
    line-height: 88rpx;
    background-color: $primary;
    color: white;
    border: none;
    border-radius: 44rpx;
    font-size: 30rpx;
    font-weight: 500;
    box-shadow: 0 6rpx 16rpx rgba(22, 93, 255, 0.25);
    transition: all 0.2s;
    
    &:hover {
      background-color: #0E42D2;
      transform: translateY(-2rpx);
    }
  }
}

// 筛选弹窗
.filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

.modal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: $card;
  border-radius: 30rpx 30rpx 0 0;
  padding: 30rpx;
  transform: translateY(100%);
  animation: slideUp 0.3s forwards;
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .modal-title {
      font-size: 32rpx;
      font-weight: 600;
      color: $text-primary;
    }
    
    .modal-close {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: $bg;
      
      text {
        font-size: 30rpx;
        color: $text-tertiary;
      }
    }
  }
  
  .filter-content {
    margin-bottom: 40rpx;
  }
  
  .filter-section {
    margin-bottom: 36rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .filter-title {
      font-size: 28rpx;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 20rpx;
    }
  }
  
  .date-options, .service-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
  }
  
  .date-item, .service-item {
    padding: 14rpx 24rpx;
    background-color: $bg;
    border: 1px solid $border;
    border-radius: 30rpx;
    font-size: 26rpx;
    color: $text-secondary;
    white-space: nowrap;
    transition: all 0.2s;
    
    &.active {
      background-color: $primary-light;
      border-color: $primary;
      color: $primary;
      font-weight: 500;
    }
    
    &:hover {
      transform: translateY(-2rpx);
    }
  }
  
  .date-picker {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .date-input {
      display: flex;
      align-items: center;
      
      text {
        font-size: 26rpx;
        color: $text-secondary;
        margin-right: 20rpx;
        width: 140rpx;
      }
      
      .picker-view {
        flex: 1;
        height: 70rpx;
        line-height: 70rpx;
        padding: 0 20rpx;
        background-color: $bg;
        border: 1px solid $border;
        border-radius: 10rpx;
        font-size: 26rpx;
        color: $text-primary;
      }
    }
  }
  
  .modal-actions {
    display: flex;
    gap: 20rpx;
    margin-top: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 90rpx;
      line-height: 90rpx;
      border-radius: 12rpx;
      font-size: 30rpx;
      font-weight: 500;
    }
    
    .reset-btn {
      background-color: $bg;
      color: $text-secondary;
      border: 1px solid $border;
    }
    
    .confirm-btn {
      background-color: $primary;
      color: white;
      border: 1px solid $primary;
    }
  }
}

// 动画效果
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
</style>
    